const {} = React;
const { message, Spin, Input, Select, Form, Button, DatePicker } = antd;


function Load() {
    const { loading: loadingBySubmit, run: submitData } = useRequest(values => {
        let birthday = values.birthday && values.birthday.format('YYYY-M-D');

        request
            .get('/user/modifyUserBySelf', {
                params: {
                    ...values,
                    birthday,
                },
            })
            .then(res => {
                if (typeof res === 'boolean') {
                    if (res === true) {
                        message.success('修改成功，5秒后跳转页面');
                        setTimeout(() => (location.href = '/web/personCenter/'), 5000);
                    }
                } else {
                    console.log(res);
                    message.error('异常信息: ' + JSON.stringify(res));
                }
            })
            .catch(e => {
                message.error('修改失败');
                console.log(e.message);
            });
    });

    return (
        <Spin spinning={loadingBySubmit}>
            <div style={{ display: 'flex', flexDirection: 'column', justifyContext: 'center', alignItems: 'center' }}>
                <h1>修改信息</h1>
                <Form
                    layout='vertical'
                    style={{ width: 300 }}
                    onFinish={values => {
                        submitData(values);
                    }}>
                    <Form.Item label='姓名' name='username' rules={[required('请输入姓名')]}>
                        <Input autoComplete='off' />
                    </Form.Item>
                    <Form.Item label='性别' name='sex' rules={[required('请选择性别')]}>
                        <Select>
                            <Select.Option value={0}>女</Select.Option>
                            <Select.Option value={1}>男</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label='出生日期' name='birthday' rules={[required('请选择出生日期')]}>
                        <DatePicker />
                    </Form.Item>

                    <Form.Item label='地址' name='address' rules={[required('请输入地址')]}>
                        <Input />
                    </Form.Item>
                    <Form.Item label='备注' name='note' rules={[required('请输入备注')]}>
                        <Input.TextArea />
                    </Form.Item>

                    <Form.Item>
                        <Button htmlType='submit'>提交</Button>
                        <Button htmlType='reset'>重置</Button>
                    </Form.Item>
                </Form>
            </div>
        </Spin>
    );
}
